<!--  线 + 柱混合图 -->
<template>
    <el-card>
        <template #header>
            <div class="title">
                实收款和取消订单数统计（{{ dateNow.getFullYear() + '/01/01' }}-{{ dateNow.toLocaleDateString() }}）
                <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
                    <i-ep-download class="download" @click="downloadEchart" />
                </el-tooltip>
            </div>
        </template>
        <div v-loading="loading" :id="id" :class="className" :style="{ height, width }"></div>
    </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { markRaw, onActivated, onMounted, ref } from "vue";
import axios from 'axios'
import { baseURL_dev } from '@/config/baseURL'
const baseURL = baseURL_dev
const props = defineProps({
    id: {
        type: String,
        default: "barChart",
    },
    className: {
        type: String,
        default: "",
    },
    width: {
        type: String,
        default: "200px",
        required: true,
    },
    height: {
        type: String,
        default: "200px",
        required: true,
    },
});






const downloadEchart = () => {
    // 获取画布图表地址信息
    const img = new Image();
    img.src = chart.value.getDataURL({
        type: "png",
        pixelRatio: 1,
        backgroundColor: "#fff",
    });
    // 当图片加载完成后，生成 URL 并下载
    img.onload = () => {
        const canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext("2d");
        if (ctx) {
            ctx.drawImage(img, 0, 0, img.width, img.height);
            const link = document.createElement("a");
            link.download = `业绩柱状图.png`;
            link.href = canvas.toDataURL("image/png", 0.9);
            document.body.appendChild(link);
            link.click();
            link.remove();
        }
    };
};


const chart = ref<any>("");

const loading = ref(true)
const dateNow = new Date()
//获取统计数据
function getStatisticsData() {
    axios.get(baseURL + "DataStatistics/GetOrderCountsandActualReceives").then(res => {
        var dateArr = [];
        var cancelCountArr = [];
        var actualReceivesArr = [];
        if (res.data.Data != null) {
            dateArr = res.data.Data.Data.map(item => item.DateFormat);
            cancelCountArr = res.data.Data.Data.map(item => item.CancelOrderCount);
            actualReceivesArr = res.data.Data.Data.map(item => item.ActualReceives);
        }
        //console.log(res.data);
        const options = {
            grid: {
                left: "2%",
                right: "2%",
                bottom: "10%",
                containLabel: true,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                    crossStyle: {
                        color: "#999",
                    },
                },
            },
            legend: {
                x: "center",
                y: "bottom",
                data: dateArr,
                textStyle: {
                    color: "#999",
                },
            },
            xAxis: [
                {
                    type: "category",
                    data: dateArr,
                    axisPointer: {
                        type: "shadow",
                    },
                },
            ],
            yAxis: [
                {
                    type: "value",
                    //min: 0,
                    //max: 10000,
                    //interval: 2000,
                    axisLabel: {
                        formatter: "{value} ",
                    },
                },
                {
                    type: "value",
                    //min: 0,
                    //max: 100,
                    //interval: 20,
                    axisLabel: {
                        formatter: "{value}",//%
                    },
                },
            ],
            series: [
                /* {
                    name: "取消订单数",
                    type: "bar",
                    data: cancelCountArr,
                    barWidth: 20,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                }, */
                {
                    name: "实收款",
                    type: "bar",
                    data: actualReceivesArr,
                    barWidth: 20,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#25d73c" },
                            { offset: 0.5, color: "#1bc23d" },
                            { offset: 1, color: "#179e61" },
                        ]),
                    },
                },
                {
                    name: "取消订单数",
                    type: "line",
                    yAxisIndex: 1,
                    data: cancelCountArr,
                    itemStyle: {
                        color: "#409EFF",
                    },
                },
                /* {
                    name: "利润增长率",
                    type: "line",
                    yAxisIndex: 1,
                    data: [70, 75, 80, 85, 90],
                    itemStyle: {
                        color: "#409EFF",
                    },
                }, */
            ],
        };
        // 图表初始化
        chart.value = markRaw(
            echarts.init(document.getElementById(props.id) as HTMLDivElement)
        );

        chart.value.setOption(options);

        // 大小自适应
        window.addEventListener("resize", () => {
            chart.value.resize();
        });
        loading.value = false;
    })
}

onMounted(() => {
    getStatisticsData();

});




onActivated(() => {
    getStatisticsData();
    if (chart.value) {
        chart.value.resize();
    }
});
</script>
<style lang="scss" scoped>
.title {
    display: flex;
    justify-content: space-between;

    .download {
        cursor: pointer;

        &:hover {
            color: #409eff;
        }
    }
}
</style>
